<template>
  <div>
    <div class="top workrecord">
      <el-row>
        <el-col style="width: 320px;height: 360px;border: 2px solid #ececec;">
          <el-calendar v-model="data1">
            <template
              slot="dateCell"
              slot-scope="{date, data}">
              <div style="width: 100%;height: 100%;">
                <p>
                  {{ data.day.split('-').slice(2).join('-') }}
                </p>
              </div>
            </template>
          </el-calendar>
        </el-col>
        <el-col class="secondbox">
          <div style="border:2px solid #ececec;height:336px;padding:20px 15px 0px 0px;margin-left:20px;">
            <i class="iconfont icon-livesvg06"
               style="color:#fa8b32;display:inline-block;width:20px;height:16px;margin-left: 15px;"></i>
            <span style="color:#323232;font-size:14px;margin-left:10px;font-weight:700">下载情况</span>
            <div style="padding-top:25px;padding-left:34px;height: 251.25px;">
              <el-scrollbar style="height: 100%;">
                <div class="timeLine">
                  <el-row v-if="activities.list">
                    <el-col v-for="(item,index) in activities.list" :key="index" v-if="activities.list.length !== 0">
                      <el-col style="width: 6%;">
                        <el-row type="flex" justify="center">
                          <el-col style="width: 14px;">
                            <div
                              style="width: 12px;height: 12px;border-radius: 50%;border: 1px solid #1864c7;background-color:#4979fd;">
                              <div
                                style="width: 6px;height: 6px;border-radius: 50%;background-color: #fff;margin: 0 auto;margin-top: 3px;"
                              ></div>
                            </div>
                            <div style="width: 5px;height: 35px;background-color: #ececec;margin: 0 auto;"
                                 v-if="index !== activities.list.length - 1"></div>
                          </el-col>
                        </el-row>
                      </el-col>
                      <el-col style="width: 90%;">
                        <p style="font-size: 14px;margin-left: 10px;">{{item}}</p>
                      </el-col>
                    </el-col>
                    <div v-if="activities.list.length == 0">
                      <div style="text-align: center;">
                        <img src="../../../static/image/leida.png" alt="" style="width: 350px;">
                        <p style="color: #b6b6b6;margin-top: 30px;">暂无数据!</p>
                      </div>
                    </div>
                  </el-row>
                  <div style="width: 55%;text-align: center;">
                    <div class="bigBox" style="margin: 0 auto;">
                      <div class="inside">
                        {{activities.num}}
                      </div>
                    </div>
                    <p class="totalText">下载简历总数</p>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </el-col>
        <!-- <el-col :xl="9">
          <div style="border:2px solid #ececec;height:346px;padding:10px 15px 0px;">
            <i class="iconfont icon-c15_show" style="color:#25c6d8;display:inline-block;width:20px;height:16px;"></i>
            <span style="color:#323232;font-size:14px;margin-left:10px;font-weight:700">完成情况</span>
            <div>
              <el-row>
                <el-col style="width:45%;">
                  <div id="container" style="height:300px;"></div>
                </el-col>
                <el-col style="width:45%;height: 300px;position: relative;">
                  <div style="height: 100%;">
                    <div id="chart" style="width: 300px;height:300px;margin: 0 auto;"></div>
                  </div>
                </el-col>
              </el-row>
              <div>
              </div>
            </div>
          </div>
        </el-col> -->
      </el-row>
    </div>
    <div class="center">
      <i class="iconfont icon-plane" style="color:#00b6d3"></i>
      <span style="color:#343434;font-size:14px;font-weight:700;margin-left:10px;">上传记录</span>
      <el-table
        ref="singleTable"
        highlight-current-row
        :data="tableData"
        class="tableT"
      >
        <!-- <el-table-column
          width="100"
          prop="type"
          label="职位情况"
        >
        </el-table-column> -->
        <el-table-column
          width="100"
          prop="customer_name"
          label="推送客户"
        >
        </el-table-column>
        <el-table-column
          width="100"
          prop="origin"
          label="简历来源"
        >
        </el-table-column>
        <el-table-column
          width="50"
          prop="sex"
          label="性别"
        >
        </el-table-column>
        <el-table-column
          width="100"
          prop="name"
          label="姓名"
        >
        </el-table-column>
        <el-table-column
          width="120"
          prop="phone"
          label="联系方式"
        >
        </el-table-column>
        <el-table-column
          width="160"
          prop="post_name"
          label="职位"
        >
        </el-table-column>
        <el-table-column
          width="50"
          prop="post_level"
          label="级别"
        >
        </el-table-column>
        <el-table-column
          width="50"
          prop="status"
          label="状态"
        >
        </el-table-column>
        <el-table-column
          width="100"
          label="期望薪资"
        >
          <template slot-scope="scope">
            {{scope.row.expect_salary}}k*{{scope.row.expect_salary_num}}
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          prop="entry_time"
          label="到岗时间"
        >
        </el-table-column>
        <el-table-column
          prop="initial_evaluation"
          label="初步评价"
        >
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="pagehandleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalcount"
        ></el-pagination>
      </div>
    </div>
    <div class="bottom">
      <i class="iconfont icon-xiazai" style="color:#9390df"></i>
      <span style="color:#323232;font-size:14px;margin-left:10px;font-weight:700;margin-bottom:10px;">下载简历</span>
      <el-row type="flex" justify="space-between">
        <el-col style="padding-top: 10px;">
          <el-col class="data" v-if="data.length !== 0" v-for="item in data" :key="item.id">
            <a :href="item.group+'/'+item.fileAddress"
               style="font-size: 16px;color:#57adfb;line-height:50px;text-decoration: none;" target="_blank">{{item.name}}</a>
            <p style="color:#767676;font-size:14px;">未推送原因：{{item.reason}}</p>
          </el-col>
          <div v-if="data.length == 0">
            <div style="text-align: center;">
              <img src="../../../static/image/leida.png" alt="" style="width: 350px;">
              <p style="color: #b6b6b6;margin-top: 30px;">暂无数据!</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="错误"
      :visible.sync="errordialogVisible"
      width="30%"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">选择日期超过当前日期</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="handleClose">确 定</el-button>
    <el-button round @click="handleClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import moment from 'moment'
  import axios from 'axios'
  import 'echarts-liquidfill/src/liquidFill';
  import Highcharts from 'highcharts'
  
  export default {
    name: "workrecord1",
    props: {
      transData: {
        type: Object
      }
    },
    data() {
      return {
        date: this.transData.date,
        data1: this.transData.date,
        userName: this.transData.username,
        title: "工作记录（专员）",
        activities: [],
        total: 20,
        tableData: [],
        currentPage: 1,
        pagesize: 15,
        totalcount: 0,
        data: [],
        dialogVisible: false,
        num: 1,
        websitelist: [],
        adddis: false,
        completionlist: {},
        errordialogVisible: false,
        text: ''
      }
    },
    created() {
      this.selectdownloadinfo();
      // this.selectcompletion();
      this.selectuploadrecord();
      this.selectdownloadresume();
    },
    methods: {
      test(date) {
        this.currentPage = 1;
        var date = moment(date).format('YYYY-MM-DD');
        axios.post(this.url + '/workrecord/checktime', {
          time: date
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.date = date;
            this.selectdownloadinfo();
            // this.selectcompletion();
            this.selectuploadrecord();
            this.selectdownloadresume();
          }
          if (res.data.code == -300) {
            this.data1 = this.date;
            this.errordialogVisible = true;
            document.documentElement.style.overflow = 'hidden';
          }
        })
      },
      //柱状图
      // drawColumn() {
      //   Highcharts.chart('container', {
      //     chart: {
      //       type: 'column'
      //     },
      //     title: {
      //       text: ''
      //     },
      //     subtitle: {
      //       text: ''
      //     },
      //     xAxis: {
      //       categories: [
      //         '主做职位', '辅做职位', '未负责职位'
      //       ],
      //       crosshair: true
      //     },
      //     yAxis: {
      //       min: 0,
      //       title: {
      //         text: ''
      //       }
      //     },
      //     legend: {
      //       align: "center",
      //       verticalAlign: "bottom",
      //       x: 0,
      //       y: 0
      //     },
      //     tooltip: {
      //       // head + 每个 point + footer 拼接成完整的 table
      //       headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
      //       pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      //         '<td style="padding:0"><b>{point.y}个</b></td></tr>',
      //       footerFormat: '</table>',
      //       shared: true,
      //       useHTML: true
      //     },
      //     plotOptions: {
      //       column: {
      //         borderWidth: 0
      //       }
      //     },
      //     series: [{
      //       name: '要求推送简历数量',
      //       data: [this.completionlist.planNum, this.completionlist.supPlanNum, this.completionlist.surplus],
      //       color: '#1e88e4'
      //     }, {
      //       name: '实际推送简历数量',
      //       data: [this.completionlist.finishNum, this.completionlist.supFinishNum],
      //       color: '#24c8dc'
      //     }]
      //   });
      // },
      //水波图
      // liquidFill() {//方法
      //   var liquid = this.$echarts.init(document.getElementById('chart'));
      //   var vm = this;
      //   if (this.completionlist.percentage !== 1) {
      //     this.text = "今日任务未完成，不可提交!"
      //   } else {
      //     this.text = "今日任务已完成!"
      //   }
      //   liquid.setOption({
      //     title: {
      //       text: vm.text,
      //       textStyle: {
      //         color: '#f27171',
      //         fontFamily: 'Microsoft YaHei',
      //         align: 'center',
      //         verticalAlign: 'middle'
      //       },
      //       bottom: '30px',
      //       left: "center",
      //     },
      //     series: [{
      //       type: 'liquidFill',
      //       data: [vm.completionlist.percentage, vm.completionlist.percentage],
      //       outline: {
      //         borderDistance: 0,
      //         itemStyle: {
      //           borderWidth: 0,
      //         }
      //       },
      //       backgroundStyle: {
      //         color: '#fff',
      //         borderWidth: '2',
      //         borderColor: '#5fb3f7',
      //         itemStyle: {
      //           shadowBlur: 100,
      //           shadowColor: '#f60',
      //           opacity: 1
      //         }
      //       },
      //       itemStyle: {
      //         opacity: 0.5,
      //         shadowBlur: 10,
      //       },
      //       emphasis: {
      //         itemStyle: {
      //           opacity: 1
      //         }
      //       },
      //       color: ['#5fb3f7'],
      //       shape: 'circle',
      //       center: ['50%', '40%'],
      //       radius: '60%',
      //       amplitude: 3,
      //       waveLength: '50%',
      //       phase: 0,//
      //       period: (value, index) => {
      //         return index * 2000;
      //       },
      //       direction: 'left',
      //       waveAnimation: true,
      //       animationEasing: 'linear',
      //       animationEasingUpdate: 'quarticInOut',
      //       animationDuration: 3000,
      //       animationDurationUpdate: 300
      //     }],
      //   })
      // },
      //查询下载状况
      selectdownloadinfo() {
        axios.post(this.url + '/workrecord/selectdownloadinfo', {
          time: this.date,
          username: this.userName
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.activities = res.data.data;
          }
        })
      },
      //完成情况
      // selectcompletion() {
      //   axios.post(this.url + '/workrecord/selectcompletion', {
      //     time: this.date,
      //     username: this.userName
      //   }).then(res => {
      //     this.unlogin(res.data.code);
      //     if (res.data.code == 200) {
      //       this.completionlist = res.data.data;
      //       if (this.completionlist.percentage !== 0) {
      //         this.completionlist.percentage = this.completionlist.percentage / 100;
      //         this.$nextTick(() => {
      //           this.liquidFill();
      //         })
      //       }
      //       if (this.completionlist.percentage == 0) {
      //         this.$nextTick(() => {
      //           this.liquidFill();
      //         })
      //       }
      //       this.drawColumn();
      //     }
      //   })
      // },
      //上传记录
      selectuploadrecord() {
        axios.post(this.url + '/workrecord/selectuploadrecord', {
          time: this.date,
          username: this.userName,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })
      },
      //下载情况
      selectdownloadresume() {
        axios.post(this.url + '/workrecord/selectdownloadresume', {
          time: this.date,
          username: this.userName
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.data = res.data.data;
          }
        })
      },
      handleSizeChange(val) {
        this.pagesize = val;
        this.selectuploadrecord();
      },
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        this.selectuploadrecord();
      },
      handleClose() {
        this.errordialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
    },
    watch: {
      'data1': function (val) {
        this.test(moment(val).format('YYYY-MM-DD'))
      }
    }
  }
</script>

<style scoped>
  .hand {
    color: #1099ff;
  }
  
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .top {
    background-color: #fff;
    padding-top: 16px;
    padding-left: 18px;
    padding-bottom: 16px;
    padding-right: 18px;
  }
  
  .center {
    margin-top: 6px;
    padding: 14px 18px;
    background-color: #fff;
  }
  
  .bottom {
    margin-top: 6px;
    padding: 14px 18px;
    background-color: #fff;
  }
  
  .add {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
    padding: 7px 15px !important;
  }
  
  .add:hover {
    color: #fff !important;
  }
  
  .timeLine {
    margin-left: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center
  }
  
  .bigBox {
    width: 86px;
    height: 86px;
    border-radius: 43px;
    position: relative;
    background-color: #d9ebff;
  }
  
  .inside {
    width: 56px;
    height: 56px;
    text-align: center;
    line-height: 56px;
    border-radius: 28px;
    background-color: #4da2ff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -28px;
    margin-top: -28px;
    color: #fff;
    font-weight: bold;
    font-size: 26px;
  }
  
  .totalText {
    margin-top: 20px;
    font-size: 16px;
    color: #747474;
    font-weight: 600;
    margin-left: -4px;
  }
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  
  .data {
    width: 295px;
    height: 100px;
    border: 2px solid #ececec;
    border-radius: 10px;
    padding-left: 16px;
    padding-bottom: 10px;
    margin-right: 30px;
    margin-bottom: 15px;
  }
  
  
  @media screen and (min-width: 1200px) and (max-width: 1675px) {
    .secondbox {
      width: 74.83333%;
      margin-bottom: 20px;
    }
    
    .data:nth-child(4n) {
      margin-right: 0px;
    }
  }
  
  @media screen and (min-width: 1676px) and (max-width: 1900px) {
    .secondbox {
      width: 74.83333%;
      margin-bottom: 20px;
    }
    
    .data:nth-child(5n) {
      margin-right: 0px;
    }
  }
  
  @media only screen and (min-width: 1920px) {
    .secondbox {
      width: 41.66667%;
      margin-right: 20px;
    }
    
    .data {
      width: 339px;
    }
    
    .data:nth-child(5n) {
      margin-right: 0px;
    }
  }
</style>
